<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		ul{
			list-style: none;
			width: 600px;
			height: 600px;
			border: 1px solid #000;
			margin: 100px auto;		
			display: flex;
 
		
		}
		ul>li{
			width: 300px;
			height: 100px;
			line-height: 100px;
			text-align: center;
			font-size: 30px;


			
		}
		ul>li:nth-child(1){
			background-color: red;	
			
			/* 
			 1.如果没有指定 flex-grow 或者flex-grow的值为0
			 那么当前的伸缩项不会被扩充
			 2.如果 flex-shrink的值为0 当前的伸缩项不会被缩小
			 
			 
			 注意点：
			 前面所写的注释都是宽度扩充或宽度缩小 这种说法不够严谨
			 也有可能扩充和缩小的是高度 到底是宽度还是高度是由主轴决定的
			 扩充和缩小的是主轴方向上的值
			 也就是说如果主轴是水平方向的 那么扩充和缩小的就是宽度
			 如果主轴是垂直方向的 那么扩充和缩小的就是高度
			 
			 */
			/* flex-grow: 0; */
			flex-shrink: 0;
		}
		
		ul>li:nth-child(2){
			background-color: green; 
			 
			 	/* flex-grow: 4; */
				flex-shrink: 4;
		}
		
		ul>li:nth-child(3){
			background-color: blue;
			 	/* flex-grow: 8;		 */
				flex-shrink: 8;
		}
		
		
	</style>
	</head>
	<body>
		
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
		</ul>
		
	</body>
</html>